<template>
	<view class="cart">
		<view class="cart-con" v-if="cartList.length > 0">
				<view class="cart-item" v-for="item in cartList">
					<evan-checkbox @change="changSelectStatus(item.id, item)"  shape="square" v-model="item.isChecked"></evan-checkbox>
					<view class="goods-info">
						<image :src="item.cover_img" mode=""></image>
						<view class="info">
							<view class="title">
								{{  item.gname }}
							</view>
							<view class="info-price">
								<view class="info-price_l">
									<view class="bh">
										编号：{{item.pcode.length > 9 ? item.pcode.slice(0,5) : item.pcode}}
									</view>
									<view class="count">
										数量：{{item.count}}
									</view>
								</view>
								<view class="price">
									￥{{item.price_now}}
								</view>
							</view>
							
							<view class="opt">
								<view class="controls">
										<view class="sub" @tap="sub(item)">
											<view class="line">
												
											</view>
										</view>
										<view class="num">
											{{ item.count }}
										</view>
										<view class="add" @tap="add(item)">
											<view class="line">
												
											</view>
											<view class="line">
												
											</view>
										</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		</view>
		<view class="total" v-if="cartList.length > 0">
			<view class="opt">
				<view class="opt-l">
					 <text>全选</text>
						<evan-checkbox shape="square" @change="selectAll"  v-model="allChecked"></evan-checkbox>
				</view>
				<view class="opt-r">
					<view class="total_price">
						合计: ￥{{ totalPrice }}
					</view>
				</view>
			</view>
			<view class="pay" @tap="pay">
				结算
			</view>
		</view>
		<view class="no-data" v-if="cartList.length==0">
			购物车空空如也,快去选购吧(。・∀・)ノ
		</view>
	</view>
</template>

<script>
	import { addOrderBatch } from '../../utils/order/index.js';
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				cartList: [],
				// allChecked: false
				payList: [],
				allChecked: false
			};
		},
		computed: {
			// allChecked: {
			// 	get () {
			// 		return this.cartList.every(el => el.isChecked)
			// 		this.$forceUpdate();
			// 	}
			// 	,
			// 	set (val) {
			// 		console.log(val)
			// 		this.cartList.forEach(el => el.isChecked = val);
			// 		this.$forceUpdate();
			// 	}
			// },
			// allChecked () {
			// 		return this.cartList.every(el => el.isChecked);
			// },
			totalPrice () {
				return this.payList.reduce((acc, item) => {
					if (item.isChecked) {
						return acc + item.count * item.price_now;
					} else {
						return acc;
					}
				},0)
			},
			...mapState(['count'])
		},
		methods: {
			changSelectStatus (id, item) {
				// console.log($event);
				if (item.isChecked) {
					// 选中的情况
					this.payList.push(item);
					// console.log(this.cartList);
					// console.log('选中了')
				} else {
					// 取消选中的情况
					let index = this.payList.findIndex(el => el.id == id);
					this.payList.splice(index,1);
					console.log(this.cartList);
				}
				// this.payList
				this.allChecked = this.cartList.every(el => el.isChecked);
				uni.setStorageSync('shopCart', this.cartList);
				// console.log(uni.getStorageSync('shopCart'));
			},
			selectAll () {
				console.log(this.allChecked);
				if (this.allChecked) {
					this.payList = [];
					this.payList.push(...this.cartList);
					this.cartList.forEach(el => el.isChecked = true);
					// this.cartList = this.cartList.map(el => {
					// 	el.isChecked = true;
					// 	return el;
					// });
				} else {
					this.payList = [];
					// this.cartList = this.cartList.map(el => {
					// 	el.isChecked = false;
					// 	return el;
					// });
					this.cartList.forEach(el => el.isChecked = false);
				}
				this.$forceUpdate()
				uni.setStorageSync('shopCart', this.cartList);
			},
			sub(item) {
				if (item.count <= 1) {
					uni.showToast({
						icon:'none',
						title:'该商品数量不能再减少了'
					})
				} else {
					item.count--;
					// this.cartList
					uni.setStorageSync('shopCart', this.cartList);
					let payItem = this.payList.find(el => el.id == item.id);
					payItem.count--;
				}
			},
			add(item) {
					item.count++;
					// this.cartList
					uni.setStorageSync('shopCart', this.cartList);
					let payItem = this.payList.find(el => el.id == item.id);
					payItem.count++;
			},
		async	pay () {
				uni.navigateTo({
					url: '../order/order'
				});
				this.$store.commit('setPayList', this.payList);
				return;
				let userId = uni.getStorageSync('userInfo').id;
				let addressId = '232421';
				let count = this.payList.reduce((acc, item) => {
					return acc + item.count;
				}, 0)
				let freight = '12.00';
				let price = this.totalPrice + '.00';
				let obj = {};
				obj.userId = userId;
				obj.addressId = addressId;
				obj.count = count;
				obj.freight = freight;
				obj.price = price;
				obj.orderDetail = [];
				for (let i = 0; i < this.payList.length; i++) {
					let obj1 = {};
					obj1.skuId = this.payList[i].sku_id;
					obj1.price = this.payList[i].price_now + '.00';
					obj1.count = this.payList[i].count;
					obj.orderDetail.push(obj1);
				}
				let data = await addOrderBatch(obj);
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title: '购物车'
			});
			if (uni.getStorageSync('shopCart').length > 0) {
				this.cartList = uni.getStorageSync('shopCart');
				console.log('dsad',this.cartList);
				let flag = this.cartList.every(el => el.isChecked);
				if (flag) {
					this.payList = [...this.cartList];
				} else {
					this.cartList.forEach(el => {
						if (el.isChecked) {
							this.payList.push(el);
							console.log('我执行了');
						} else {
							this.payList = [];
						}
					})
				}
				console.log(this.cartList, this.payList)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cart {
	width: 100vw;
	min-height: 100vh;
	max-width: 100%;
	background-color: #354E44;
	.cart-con {
		width: 100%;
		min-height: 100vh;
		max-width: 100%;
		background-color: #F1ECE7;
		border-radius: 60rpx 60rpx 0 0;
		box-sizing: border-box;
		padding: 60rpx 40rpx 0;
		// padding:0 40rpx ;
		.cart-item {
			width: 100%;
			height: 208rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 32rpx;
			box-sizing: border-box;
			// padding: 52rpx 65rpx 0 38rpx;
			padding: 0 65rpx 0 38rpx;
			display: flex;
			align-items: center;
			.evan-checkbox {
				width: 20px;
			}
			.goods-info {
				flex: 1;
				margin-left: 16rpx;
				display: flex;
				// justify-content: space-between;
				image {
					width: 136rpx;
					height: 136rpx;
				}
				.info {
					flex: 1;
					margin-left: 46rpx;
					.title {
						font-size: 26rpx;
						font-weight: bolder;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
					}
					.info-price {
						display: flex;
						justify-content: space-between;
						.info-price_l {
							// flex: 1;
							.bh, .count{
								font-size: 22rpx;
								color: #8D8D8D;
								letter-spacing: 1.57rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
						.price {
							// width: fit-content;
							font-size: 26rpx;
							color: #8D8D8D;
						}
					}
					.opt {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						.controls {
									display: flex;
									.num {
										width: 72rpx;
										height: 40rpx;
										background: #F1ECE7;
										border-radius: 21.6rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										font-size: 24rpx;
										color: #3E3E3E;
										letter-spacing: 1.18px;
										margin: 0 8rpx;
									}
									.sub, .add {
										width: 38rpx;
										height: 40rpx;
										background: #F1ECE7;
										border-radius: 21.6rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										.line {
											width: 18rpx;
											height: 3rpx;
											border-radius: 2rpx;
											background-color: #979797;
										}
									}
									.add {
										flex-direction: column;
										.line {
											&:first-child {
												transform-origin: center;
												transform:  translateY(3.5rpx) rotate(90deg);
											}
										}
									}
								}
						}
					}
					
			}
		}
	}
	.total {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding: 0 38rpx 0 58rpx;
		display: flex;
		align-items: center;
		.opt {
			flex: 1;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			.opt-l {
				display: flex;
				text {
					margin-right: 10rpx;
				}
			}
		}
		.pay {
			width: 208rpx;
			height: 80rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			letter-spacing: 2.57rpx;
			background: #354E44;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10rpx;
		}
	}
	.no-data {
		width: 100%;
		min-height: 100vh;
		max-width: 100%;
		background-color: #F1ECE7;
		border-radius: 60rpx 60rpx 0 0;
		box-sizing: border-box;
		padding: 200rpx 40rpx 0;
		color: #b0b0b0;
		display: flex;
		justify-content: center;
	}
}
</style>
